<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="/examples/public/favicon.ico"
    />
    <link rel="stylesheet" href="../css/common.css" />
    <title>Vue2-ConfigExtends</title>
  </head>

  <style>
    #app {
      width: 100%;
      height: 100%;
    }

    .operate-box {
      position: fixed;
      color: rgb(255, 255, 255);
      top: 30%;
      left: unset;
      right: 10%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .operate-box > * {
      margin-bottom: 5px;
    }
  </style>

  <body>
    <div id="app">
      <div class="operate-box">
        <div class="controller-box">
          <span class="box-label">文本：</span
          ><input
            type="text"
            v-model="canvasTexture.canvasExtends.text"
            name=""
            id=""
            @input="updateCanvas"
          />
        </div>
        <div class="controller-box">
          <span class="box-label">数字：</span
          ><input
            type="range"
            step="1"
            v-model="canvasTexture.canvasExtends.number"
            @input="updateCanvas"
          />
        </div>
      </div>
    </div>

    <script type="module">
      import Vue from "/examples/public/plugins/vue2/vue.esm.browser.min.js";
      import * as Vis from "../../dist/Vis.es.js";

      const canvasGenerator = new Vis.CanvasGenerator({
        width: 800,
        height: 160,
      }).preview({
        top: "5%",
        left: "5%",
      });

      const engine = new Vis.ModelingEngineSupport().registerResources({
        "example.canvas": canvasGenerator.get(),
      });

      const ambientLight = Vis.generateConfig("AmbientLight");
      const canvasTexture = engine.dataSupportManager.reactiveConfig(
        Vue.observable(
          Vis.generateConfig(
            "CanvasTexture",
            {
              url: "example.canvas",
              canvasExtends: {
                number: 0,
                text: "Hello World",
              },
            },
            false
          )
        )
      );

      const spriteMaterial = Vis.generateConfig("SpriteMaterial", {
        map: canvasTexture.vid,
      });

      const sprite = Vis.generateConfig("Sprite", {
        material: spriteMaterial.vid,
        position: {
          y: 15,
        },
        scale: {
          x: 25,
          y: 5,
        },
      });

      const scene = Vis.generateConfig("Scene", {
        children: [ambientLight.vid, sprite.vid],
      });

      engine.applyConfig(
        ambientLight,
        canvasTexture,
        spriteMaterial,
        sprite,
        scene
      );

      new Vue({
        el: "#app",
        data() {
          return {
            canvasTexture,
          };
        },
        methods: {
          updateCanvas() {
            canvasGenerator.clear().draw((ctx) => {
              ctx.textBaseline = "middle";
              ctx.textAlign = "center";

              ctx.fillStyle = "rgb(206, 42, 230)";

              ctx.font = " bold 72px 微软雅黑";
              ctx.fillText(
                `${this.canvasTexture.canvasExtends.text} ${this.canvasTexture.canvasExtends.number} `,
                400,
                80
              );
            });
            this.canvasTexture.needsUpdate = true;
          },
        },
        mounted() {
          this.updateCanvas();
          engine
            .setDom(document.getElementById("app"))
            .setSize()
            .setScene(scene.vid)
            .play();
        },
      });
    </script>
  </body>
</html>
